<template>
  <view class="device-detail-container">
    <!-- 设备基本信息卡片 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">设备信息</text>
        <view class="device-status"
          :class="getStatusClass(deviceInfo.status)"
        >
          {{ getStatusText(deviceInfo.status) }}
        </view>
      </view>

      <view class="device-info">
        <view class="info-item">
          <text class="info-label">设备名称：</text>
          <text class="info-value">{{ deviceInfo.name }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">设备编号：</text>
          <text class="info-value">{{ deviceInfo.deviceId }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">安装位置：</text>
          <text class="info-value">{{ deviceInfo.location }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">最后更新：</text>
          <text class="info-value">{{ deviceInfo.lastUpdate }}</text>
        </view>
      </view>

      <view class="online-indicator">
        <view class="indicator-dot" :class="{ online: deviceInfo.isOnline }"></view>
        <text class="indicator-text">{{ deviceInfo.isOnline ? '在线' : '离线' }}</text>
      </view>
    </view>

    <!-- 实时数据卡片 -->
    <view class="data-card">
      <view class="card-header">
        <text class="card-title">实时数据</text>
        <text class="update-time">更新于：{{ currentData.updateTime }}</text>
      </view>

      <view class="data-grid">
        <view class="data-item">
          <view class="data-icon">🏠</view>
          <text class="data-label">使用率</text>
          <text class="data-value">{{ currentData.usage }}%</text>
          <view class="data-bar">
            <view class="bar-fill" :style="{ width: currentData.usage + '%' }"></view>
          </view>
        </view>

        <view class="data-item">
          <view class="data-icon">🌡️</view>
          <text class="data-label">温度</text>
          <text class="data-value">{{ currentData.temperature }}°C</text>
          <text class="data-status" :class="getTempStatus(currentData.temperature)">{{ getTempStatusText(currentData.temperature) }}</text>
        </view>

        <view class="data-item">
          <view class="data-icon">💧</view>
          <text class="data-label">湿度</text>
          <text class="data-value">{{ currentData.humidity }}%</text>
          <text class="data-status" :class="getHumidityStatus(currentData.humidity)">{{ getHumidityStatusText(currentData.humidity) }}</text>
        </view>

        <view class="data-item">
          <view class="data-icon">🔋</view>
          <text class="data-label">电量</text>
          <text class="data-value" :class="{ low: currentData.battery < 20 }">{{ currentData.battery }}%</text>
          <view class="battery-bar">
            <view class="battery-fill" :style="{ width: currentData.battery + '%' }" :class="{ low: currentData.battery < 20 }"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 传感器数据卡片 -->
    <view class="sensor-card">
      <view class="card-header">
        <text class="card-title">传感器数据</text>
      </view>

      <view class="sensor-grid">
        <view class="sensor-item"
          v-for="sensor in sensorData"
          :key="sensor.type"
        >
          <view class="sensor-header">
            <text class="sensor-name">{{ sensor.name }}</text>
            <view class="sensor-status" :class="sensor.status"></view>
          </view>

          <view class="sensor-value">
            <text class="value">{{ sensor.value }}</text>
            <text class="unit">{{ sensor.unit }}</text>
          </view>

          <text class="sensor-desc">{{ sensor.description }}</text>
        </view>
      </view>
    </view>

    <!-- 历史数据图表 -->
    <view class="chart-card">
      <view class="card-header">
        <text class="card-title">24小时数据趋势</text>
        <view class="chart-tabs">
          <text
            v-for="tab in chartTabs"
            :key="tab.key"
            class="chart-tab"
            :class="{ active: activeChart === tab.key }"
            @click="activeChart = tab.key"
          >{{ tab.label }}</text>
        </view>
      </view>

      <view class="chart-container">
        <view class="chart-placeholder">
          <text class="chart-text">📊 {{ getChartTitle() }}趋势图</text>
          <text class="chart-desc">数据可视化功能开发中...</text>
        </view>
      </view>
    </view>

    <!-- 控制面板 -->
    <view class="control-card">
      <view class="card-header">
        <text class="card-title">设备控制</text>
      </view>

      <view class="control-grid">
        <view
          v-for="control in controls"
          :key="control.key"
          class="control-item"
          @click="handleControl(control.key)"
        >
          <view class="control-icon" :class="control.iconClass">{{ control.icon }}</view>
          <text class="control-name">{{ control.name }}</text>
          <text class="control-desc">{{ control.description }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="btn btn-primary" @click="createWorkOrder">
        <text class="btn-icon">📝</text>
        <text>创建工单</text>
      </button>
      <button class="btn btn-secondary" @click="viewHistory">
        <text class="btn-icon">📊</text>
        <text>查看历史</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 页面参数
const deviceId = ref('')

// 设备基本信息
const deviceInfo = ref({
  id: 1,
  name: '移动厕所-001',
  deviceId: 'MS-001',
  status: 'normal',
  location: '人民广场东侧',
  isOnline: true,
  lastUpdate: '2024-01-15 14:30:00'
})

// 实时数据
const currentData = ref({
  usage: 75,
  temperature: 22,
  humidity: 65,
  battery: 85,
  updateTime: '2024-01-15 14:30:00'
})

// 传感器数据
const sensorData = ref([
  {
    type: 'door',
    name: '门锁状态',
    value: '已锁定',
    unit: '',
    description: '设备门锁当前状态',
    status: 'normal'
  },
  {
    type: 'light',
    name: '照明状态',
    value: '开启',
    unit: '',
    description: '内部照明系统状态',
    status: 'normal'
  },
  {
    type: 'cleaner',
    name: '清洁状态',
    value: '正常',
    unit: '',
    description: '自动清洁系统状态',
    status: 'normal'
  },
  {
    type: 'dispenser',
    name: '洗手液',
    value: '充足',
    unit: '',
    description: '洗手液余量状态',
    status: 'normal'
  },
  {
    type: 'paper',
    name: '纸巾',
    value: '中等',
    unit: '',
    description: '纸巾余量状态',
    status: 'warning'
  },
  {
    type: 'water',
    name: '水箱',
    value: '85',
    unit: 'L',
    description: '水箱剩余水量',
    status: 'normal'
  }
])

// 图表标签
const chartTabs = ref([
  { key: 'usage', label: '使用率' },
  { key: 'temperature', label: '温度' },
  { key: 'humidity', label: '湿度' },
  { key: 'battery', label: '电量' }
])
const activeChart = ref('usage')

// 设备控制选项
const controls = ref([
  {
    key: 'unlock',
    name: '远程开锁',
    icon: '🔓',
    description: '远程开启设备门锁',
    iconClass: 'unlock'
  },
  {
    key: 'light',
    name: '照明控制',
    icon: '💡',
    description: '控制内部照明',
    iconClass: 'light'
  },
  {
    key: 'clean',
    name: '清洁模式',
    icon: '🧹',
    description: '启动清洁程序',
    iconClass: 'clean'
  },
  {
    key: 'maintenance',
    name: '维护模式',
    icon: '🔧',
    description: '切换到维护状态',
    iconClass: 'maintenance'
  }
])

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    normal: 'status-normal',
    maintenance: 'status-maintenance',
    fault: 'status-fault'
  }
  return statusMap[status] || 'status-normal'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    normal: '正常',
    maintenance: '维护中',
    fault: '故障'
  }
  return statusMap[status] || '未知'
}

// 获取温度状态
const getTempStatus = (temp: number) => {
  if (temp < 15) return 'low'
  if (temp > 30) return 'high'
  return 'normal'
}

// 获取温度状态文本
const getTempStatusText = (temp: number) => {
  if (temp < 15) return '偏低'
  if (temp > 30) return '偏高'
  return '正常'
}

// 获取湿度状态
const getHumidityStatus = (humidity: number) => {
  if (humidity < 40) return 'low'
  if (humidity > 80) return 'high'
  return 'normal'
}

// 获取湿度状态文本
const getHumidityStatusText = (humidity: number) => {
  if (humidity < 40) return '干燥'
  if (humidity > 80) return '潮湿'
  return '适宜'
}

// 获取图表标题
const getChartTitle = () => {
  const tab = chartTabs.value.find(t => t.key === activeChart.value)
  return tab ? tab.label : '数据'
}

// 处理设备控制
const handleControl = (key: string) => {
  const control = controls.value.find(c => c.key === key)
  if (control) {
    uni.showModal({
      title: '确认操作',
      content: `确定要执行"${control.name}"操作吗？`,
      success: (res) => {
        if (res.confirm) {
          uni.showLoading({ title: '执行中...' })
          setTimeout(() => {
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success'
            })
          }, 1500)
        }
      }
    })
  }
}

// 创建工单
const createWorkOrder = () => {
  uni.navigateTo({
    url: `/pages/work-orders/create?deviceId=${deviceId.value}`
  })
}

// 查看历史
const viewHistory = () => {
  uni.showToast({
    title: '历史数据功能开发中',
    icon: 'none'
  })
}

// 页面加载
onLoad((options) => {
  if (options?.id) {
    deviceId.value = options.id
    console.log('设备详情页面，设备ID:', deviceId.value)
  }
})

// 页面挂载
onMounted(() => {
  console.log('设备详情页面加载')
})
</script>

<style lang="scss" scoped>
.device-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%);
  padding: 24rpx;
  padding-bottom: 40rpx;
}

// 通用卡片样式
.info-card,
.data-card,
.sensor-card,
.chart-card,
.control-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

// 设备信息卡片
.info-card {
  .device-status {
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    font-size: 24rpx;
    font-weight: 500;

    &.status-normal {
      background: #f6ffed;
      color: #52c41a;
    }

    &.status-maintenance {
      background: #fff7e6;
      color: #faad14;
    }

    &.status-fault {
      background: #fff1f0;
      color: #ff4d4f;
    }
  }

  .device-info {
    margin-bottom: 24rpx;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      border-bottom: 1rpx solid #f8f9fa;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }

      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }
  }

  .online-indicator {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx;
    background: #f8f9fa;
    border-radius: 12rpx;

    .indicator-dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background: #ccc;

      &.online {
        background: #52c41a;
        box-shadow: 0 0 8rpx rgba(82, 196, 26, 0.5);
      }
    }

    .indicator-text {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

// 实时数据卡片
.data-card {
  .update-time {
    font-size: 24rpx;
    color: #999;
  }

  .data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;

    .data-item {
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 24rpx;
      text-align: center;

      .data-icon {
        font-size: 48rpx;
        margin-bottom: 12rpx;
      }

      .data-label {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 8rpx;
      }

      .data-value {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;

        &.low {
          color: #ff4d4f;
        }
      }

      .data-status {
        font-size: 22rpx;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        font-weight: 500;

        &.low {
          background: #e6f7ff;
          color: #1890ff;
        }

        &.high {
          background: #fff1f0;
          color: #ff4d4f;
        }

        &.normal {
          background: #f6ffed;
          color: #52c41a;
        }
      }

      .data-bar {
        height: 8rpx;
        background: #e8e8e8;
        border-radius: 4rpx;
        overflow: hidden;
        margin-top: 12rpx;

        .bar-fill {
          height: 100%;
          background: linear-gradient(90deg, #52c41a, #73d13d);
          border-radius: 4rpx;
          transition: width 0.3s ease;
        }
      }

      .battery-bar {
        width: 80rpx;
        height: 40rpx;
        border: 2rpx solid #e8e8e8;
        border-radius: 8rpx;
        position: relative;
        margin: 12rpx auto 0;

        &::after {
          content: '';
          position: absolute;
          right: -8rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 20rpx;
          background: #e8e8e8;
          border-radius: 0 4rpx 4rpx 0;
        }

        .battery-fill {
          height: 100%;
          background: linear-gradient(90deg, #52c41a, #73d13d);
          border-radius: 6rpx;
          transition: width 0.3s ease;

          &.low {
            background: linear-gradient(90deg, #ff4d4f, #ff7875);
          }
        }
      }
    }
  }
}

// 传感器数据卡片
.sensor-card {
  .sensor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .sensor-item {
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 24rpx;
      text-align: center;

      .sensor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .sensor-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }

        .sensor-status {
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;

          &.normal {
            background: #52c41a;
          }

          &.warning {
            background: #faad14;
          }

          &.error {
            background: #ff4d4f;
          }
        }
      }

      .sensor-value {
        margin-bottom: 12rpx;

        .value {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .unit {
          font-size: 24rpx;
          color: #666;
          margin-left: 4rpx;
        }
      }

      .sensor-desc {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}

// 图表卡片
.chart-card {
  .chart-tabs {
    display: flex;
    gap: 16rpx;

    .chart-tab {
      padding: 12rpx 24rpx;
      background: #f8f9fa;
      border-radius: 20rpx;
      font-size: 26rpx;
      color: #666;
      transition: all 0.3s ease;

      &.active {
        background: linear-gradient(135deg, #52c41a, #73d13d);
        color: #ffffff;
        box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.2);
      }
    }
  }

  .chart-container {
    margin-top: 24rpx;
    height: 300rpx;
    background: #f8f9fa;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .chart-placeholder {
      text-align: center;

      .chart-text {
        display: block;
        font-size: 48rpx;
        margin-bottom: 16rpx;
      }

      .chart-desc {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

// 控制面板
.control-card {
  .control-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .control-item {
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      text-align: center;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        background: #e6f7ff;
      }

      .control-icon {
        font-size: 48rpx;
        margin-bottom: 16rpx;
        display: block;
      }

      .control-name {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 8rpx;
      }

      .control-desc {
        display: block;
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}

// 操作按钮
.action-buttons {
  display: flex;
  gap: 24rpx;
  margin-top: 24rpx;

  .btn {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    font-size: 30rpx;
    font-weight: 500;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .btn-icon {
      font-size: 32rpx;
    }

    &.btn-primary {
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: #ffffff;
      box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
    }

    &.btn-secondary {
      background: #ffffff;
      color: #52c41a;
      border: 2rpx solid #52c41a;
    }
  }
}
</style>
